function VideoScreen({
  onClose,
  onStart,
  onSave,
  status,
  videoTime,
  saveMessage
}: {
  onClose: (e: React.MouseEvent) => void
  onStart: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void
  onSave: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void
  status?: MediaRecorder['state'] | 'done'
  videoTime: string
  saveMessage: {
    success: boolean
    message: string
    path?: string
  }
}): React.JSX.Element {
  return (
    <div className="group w-full h-full relative">
      {status !== 'done' ? (
        <>
          <video className="w-full h-full" muted id="video"></video>
          <div className="absolute top-[10px] right-[10px] text-[#df2908]">
            <p className="text-[18px] font-[700]">{videoTime}</p>
          </div>
          <div
            className="absolute bottom-[0px] h-2/10 flex w-full items-center justify-center gap-[10px] bg-[rgba(0,0,0,0.5)] transition-all duration-300
        opacity-0 group-hover:opacity-100 backdrop-blur-[2px]"
          >
            <div
              className="hover:[&>svg>path]:fill-[#bbadad] w-[20px] h-[20px] cursor-pointer"
              onClick={(e) => onClose(e)}
            >
              <svg
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                width="20"
                height="20"
              >
                <path
                  d="M550.848 502.496l308.64-308.896a31.968 31.968 0 1 0-45.248-45.248l-308.608 308.896-308.64-308.928a31.968 31.968 0 1 0-45.248 45.248l308.64 308.896-308.64 308.896a31.968 31.968 0 1 0 45.248 45.248l308.64-308.896 308.608 308.896a31.968 31.968 0 1 0 45.248-45.248l-308.64-308.864z"
                  fill="#fff"
                ></path>
              </svg>
            </div>
            <div
              className="w-[20px] h-[20px] cursor-pointer
          transition-all duration-300 hover:[&>svg>path]:fill-[#f58077]"
              onClick={(e) => onStart(e)}
            >
              {/* 暂停icon */}
              {!status || status === 'inactive' || status === 'paused' ? (
                <svg
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  width="21"
                  height="20"
                >
                  <path
                    d="M899.117 526.883a30.04 30.04 0 0 1-3.976 5.365 29.922 29.922 0 0 1-1.548 1.58l-0.2 0.186a30.087 30.087 0 0 1-5.472 4.057L165.858 955.094c-0.047 0.027-0.1 0.046-0.143 0.073q-1.155 0.659-2.37 1.214c-0.145 0.066-0.289 0.132-0.434 0.2q-1.084 0.476-2.212 0.864c-0.238 0.083-0.475 0.165-0.713 0.241-0.645 0.205-1.3 0.386-1.963 0.548-0.348 0.085-0.7 0.168-1.044 0.24-0.56 0.116-1.126 0.213-1.7 0.3q-1.416 0.21-2.833 0.283h-0.016a29.977 29.977 0 0 1-4.5-0.107c-0.243-0.024-0.483-0.057-0.723-0.086a30.513 30.513 0 0 1-2.109-0.331 31.377 31.377 0 0 1-1.021-0.222c-0.6-0.139-1.191-0.293-1.78-0.469-0.331-0.1-0.658-0.2-0.984-0.315q-0.921-0.309-1.82-0.676c-0.241-0.1-0.479-0.2-0.716-0.307q-1.047-0.461-2.055-1c-0.108-0.058-0.215-0.118-0.322-0.177a29.753 29.753 0 0 1-8.652-7.174l-0.071-0.089a29.873 29.873 0 0 1-1.59-2.124c-0.3-0.439-0.589-0.885-0.866-1.34-0.108-0.179-0.233-0.341-0.338-0.524a29.859 29.859 0 0 1-4-16V95.886a30 30 0 0 1 44.981-26.984l722.265 417a30 30 0 0 1 10.988 40.981zM180.89 877.13l632.327-365.2L180.89 146.856V877.13z"
                    fill="#e6e6e6"
                  ></path>
                </svg>
              ) : (
                <svg
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  width="20"
                  height="20"
                >
                  <path
                    d="M128 106.858667C128 94.976 137.621333 85.333333 149.12 85.333333h85.76c11.648 0 21.12 9.6 21.12 21.525334V917.12c0 11.882667-9.621333 21.525333-21.12 21.525333H149.12A21.290667 21.290667 0 0 1 128 917.141333V106.88z m640 0c0-11.882667 9.621333-21.525333 21.12-21.525334h85.76c11.648 0 21.12 9.6 21.12 21.525334V917.12c0 11.882667-9.621333 21.525333-21.12 21.525333h-85.76a21.290667 21.290667 0 0 1-21.12-21.525333V106.88z"
                    fill="#df2908"
                  ></path>
                </svg>
              )}
            </div>
            <div
              className="w-[20px] h-[20px] cursor-pointer
          transition-all duration-300 hover:[&>svg>path]:fill-[#59c79d]"
              onClick={(e) => onSave(e)}
            >
              <svg
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                width="21"
                height="20"
              >
                <path
                  d="M893.3 293.3L730.7 130.7c-7.5-7.5-16.7-13-26.7-16V112H144c-17.7 0-32 14.3-32 32v736c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V338.5c0-17-6.7-33.2-18.7-45.2zM384 184h256v104H384V184z m456 656H184V184h136v136c0 17.7 14.3 32 32 32h320c17.7 0 32-14.3 32-32V205.8l136 136V840z"
                  fill="#ffffff"
                ></path>
                <path
                  d="M512 442c-79.5 0-144 64.5-144 144s64.5 144 144 144 144-64.5 144-144-64.5-144-144-144z m0 224c-44.2 0-80-35.8-80-80s35.8-80 80-80 80 35.8 80 80-35.8 80-80 80z"
                  fill="#ffffff"
                ></path>
              </svg>
            </div>
          </div>
        </>
      ) : saveMessage.success ? (
        <div role="alert" className="alert alert-success alert-dash">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            className="h-6 w-6 shrink-0 stroke-current"
            fill="none"
            viewBox="0 0 24 24"
          >
            <path
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth="2"
              d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
            />
          </svg>
          {/* <span>录制成功!</span> */}
          <div>
            <p>{saveMessage.message}.</p>
            <p className="text-[11px]">文件地址：{saveMessage.path}</p>
          </div>
          <div>
            <button className="btn btn-success btn-sm" onClick={(e) => onClose(e)}>
              关闭
            </button>
          </div>
        </div>
      ) : (
        <div role="alert" className="alert alert-error">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            className="h-6 w-6 shrink-0 stroke-current"
            fill="none"
            viewBox="0 0 24 24"
          >
            <path
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth="2"
              d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
            />
          </svg>
          <span>{saveMessage.message}.</span>
        </div>
      )}
    </div>
  )
}

export default VideoScreen
